feat(box): add box and row component (#119)

* feat(box): add row component * feat(box): add box component * fix(box): add layout props and helpers * fix(row): add layout props and helpers * fix(box): add offset props * docs(row): update size prop in docs and add copy * style(box): fix gap update shadow and borderradius * style(box): add padding * style(box): move box related css to correct file * docs(box): add border color prop and update docs * docs(layout): add layout page * docs(box): update box to not be full width if used as a standalone item * chore(box): add direction and update demos * style(box): optimize css for border correctness * docs(layout): add layout docs page * docs(box): add hidden columns and update docs * style(box): add margin reset when index is 0 for offset generator * test(row): add row unit tests * docs(layout): update layout docs * docs(row): update story default prop * style(box): remove commented code * style(row): add logical properties * chore(box): add auto and gap * refactor(layout-box): rename pds-box to pds-layout-box * refactor(layout-box): renamed spec file * refactor(layout-row): rename pds-box to pds-layout-box * test(row): update col-gap prop name * style(pds-box): add spacing mixin * chore(pds-box): flex utils * docs(layout): add page to layout docs * docs(layout): typo * docs(layout): reposition demo at top of docs * docs(layout): move row and box descriptions to the top and update copy * docs(layout): copy update * style(pds-layout): reorder css and fix bug present when gap exists * docs(pds-layout): update docs to use responsive units * docs(pds-layout-box): update docs per review * docs(pds-layout-box): move gap section * test(pds-layout-box): add unit tests * chore(pds-layout-box): remove comments * docs(pds-layout): update demo * chore(pds-box): add default values * refactor(pds-box): update styles to custom css props * docs(pds-box): copy cleanup * docs(pds-box): add wrapping demo * docs(pds-layout): add border to demos * refactor(pds-box): add layout column type * refactor(pds-box): add box shirt size type * docs(pds-box): copy updates * style(pds-box): update pds-layout-box--auto flex basis * style(pds-layout-box): include fallback if min-width not specified * docs(pds-layout-box): remove used copy * docs(pds-layout-box): update section title * docs(pds-layout-box): typo * refactor(pds-layout-row): set col-gap to use tshirt type * docs(pds-layout-box): update prop * docs(pds-layout-row): update row description * test(pds-layout-row): update col-gap value * style(pds-layout-box): move mixins to folder * refactor(pds-box): rename pds-layout-box to pds-box * refactor(pds-row): rename pds-layout-row to pds-row * refactor(pds-row): move pds-box mixins to the pds-box folder * docs(pds-box): change bordered to border * docs(pds-box): add border color type to docs * docs(pds-row): update col-gap to use additional sizes and update docs * docs(pds-row): clean up bordered instances * style(pds-row): update auto box when direct child of row * style(pds-box): missed file in last commit * docs(pds-box): update to use new docs format * docs(pds-row): update to use new docs format * chore(pds-box pds-row): resolve linter errors regarding types * docs(pds-box): add props to playground story * docs(pds-row): add props to playground story * docs(pds-row): update layout page format
Kajabi · Feb 13, 2024 · 7822884 · 7822884
1 parent cc24d1b
commit 7822884
Show file tree

Hide file tree

Showing 20 changed files with 3,368 additions and 2 deletions.
diff --git a/libs/core/src/components.d.ts b/libs/core/src/components.d.ts
diff --git a/libs/core/src/components/pds-box/docs/pds-box.mdx b/libs/core/src/components/pds-box/docs/pds-box.mdx
diff --git a/libs/core/src/components/pds-box/pds-box.mixins.scss b/libs/core/src/components/pds-box/pds-box.mixins.scss
@@ -0,0 +1,51 @@
+@mixin generate-spacing-classes($directions, $tokens) {
+  @each $direction in $directions {
+    @each $key, $value in $tokens {
+      /* stylelint-disable-next-line function-no-unknown */
+      $class-name: if($direction, 'pds-spacing-#{$direction}-#{$key}', 'pds-spacing-#{$key}');
+      .#{$class-name} {
+        @if $direction == 'top' {
+          margin-block-start: $value;
+        } @else if $direction == 'bottom' {
+          margin-block-end: $value;
+        } @else if $direction == 'left' {
+          margin-inline-start: $value;
+        } @else if $direction == 'right' {
+          margin-inline-end: $value;
+        } @else {
+          margin: $value;
+        }
+      }
+    }
+  }
+}
+
+@mixin generate-columns($prefix, $columns) {
+  @for $i from 0 through $columns {
+    /* stylelint-disable-next-line function-no-unknown */
+    $class-name: if($prefix, 'pds-box-#{$prefix}-#{$i}', 'pds-box-#{$i}');
+    .#{$class-name} {
+      @if $i == 0 {
+        display: none;
+      } @else {
+        display: inline-flex;
+        flex: calc($i / $columns * 100%);
+        max-width: calc($i / $columns * 100%);
+      }
+    }
+  }
+}
+
+@mixin generate-column-offsets($prefix, $columns) {
+  @for $i from 0 through $columns {
+    /* stylelint-disable-next-line function-no-unknown */
+    $class-name: if($prefix, 'pds-box-offset-#{$prefix}-#{$i}', 'pds-box-offset-#{$i}');
+    .#{$class-name} {
+      @if $i == 0 {
+        margin-inline-start: 0;
+      } @else {
+        margin-inline-start: calc($i / $columns * 100%);
+      }
+    }
+  }
+}
diff --git a/libs/core/src/components/pds-box/pds-box.scss b/libs/core/src/components/pds-box/pds-box.scss
@@ -0,0 +1,332 @@
+@import './pds-box.mixins';
+
+pds-box {
+  --box-background-color: inherit;
+  --box-border-color: inherit;
+  --box-min-height: none;
+  --box-min-width: none;
+
+  --box-gap-xxs: var(--pine-spacing-050);
+  --box-gap-xs: var(--pine-spacing-100);
+  --box-gap-sm: var(--pine-spacing-200);
+  --box-gap-md: var(--pine-spacing-300);
+  --box-gap-lg: var(--pine-spacing-450);
+  --box-gap-xl: var(--pine-spacing-600);
+  --box-gap-xxl: var(--pine-spacing-800);
+
+  display: block;
+}
+
+img {
+  width: 100%;
+}
+
+[class*='pds-box'] {
+  background-color: var(--box-background-color);
+  box-sizing: border-box;
+  display: inline-flex;
+  min-height: var(--box-min-height);;
+  min-width: var(--box-min-width);
+
+  // The immediate child of the row will fit the width of the row
+  .pds-row > & {
+    position: relative;
+    width: 100%;
+
+    &.pds-box--auto {
+      width: auto;
+    }
+  }
+}
+
+// Spacing mixin
+$pine-spacing-tokens: (
+  xxs: 4px,
+  xs: 8px,
+  sm: 16px,
+  md: 24px,
+  lg: 36px,
+  xl: 48px,
+  2xl: 64px,
+);
+
+// Generate spacing classes
+@include generate-spacing-classes(false, $pine-spacing-tokens);
+@include generate-spacing-classes('top', $pine-spacing-tokens);
+@include generate-spacing-classes('right', $pine-spacing-tokens);
+@include generate-spacing-classes('left', $pine-spacing-tokens);
+@include generate-spacing-classes('bottom', $pine-spacing-tokens);
+
+// Base offset classes
+@include generate-column-offsets(false, 12);
+
+// Responsive offset classes
+@media (max-width: 575px) {
+  @include generate-column-offsets('xs', 12);
+}
+
+@media (min-width: 576px) {
+  @include generate-column-offsets('sm', 12);
+}
+
+@media (min-width: 768px) {
+  @include generate-column-offsets('md', 12);
+}
+
+@media (min-width: 992px) {
+  @include generate-column-offsets('lg', 12);
+}
+
+@media (min-width: 1200px) {
+  @include generate-column-offsets('xl', 12);
+}
+
+
+// Base column width classes
+@include generate-columns(false, 12);
+
+// Responsive column width classes
+@media (max-width: 575px) {
+  @include generate-columns('xs', 12);
+}
+
+@media (min-width: 576px) {
+  @include generate-columns('sm', 12);
+}
+
+@media (min-width: 768px) {
+  @include generate-columns('md', 12);
+}
+
+@media (min-width: 992px) {
+  @include generate-columns('lg', 12);
+}
+
+@media (min-width: 1200px) {
+  @include generate-columns('xl', 12);
+}
+
+.pds-box {
+  flex-basis: 0;
+  flex-grow: 1;
+}
+
+.pds-box--auto {
+  flex: 0 0 var(--box-min-width, fit-content);
+  min-width: auto;
+  width: auto;
+}
+
+.pds-box--fit {
+  max-width: 100%;
+  min-width: 100%;
+  width: 100%;
+}
+
+.pds-box--border {
+  border-color: var(--box-border-color, var(--pine-border-default-color));
+  border-style: var(--pine-border-default-style);
+  border-width: var(--pine-border-default-width);
+}
+
+// Display helpers
+.pds-box--display-flex {
+  display: flex;
+}
+
+.pds-box--display-inline-flex {
+  display: inline-flex;
+}
+
+.pds-box--display-block {
+  display: block;
+}
+
+.pds-box--display-inline-block {
+  display: inline-block;
+}
+
+// Flex helpers
+.pds-box--flex-none {
+  flex: 0 0 auto;
+}
+
+.pds-box--flex-grow {
+  flex: 1 1 auto
+}
+
+.pds-box--flex-shrink {
+  flex: 0 0 auto;
+}
+
+// Border radius helpers
+.pds-border-radius-none {
+  border-radius: 0;
+}
+
+.pds-border-radius-xs {
+  border-radius: var(--pine-border-radius-xs);
+}
+
+.pds-border-radius-sm {
+  border-radius: var(--pine-border-radius-sm);
+}
+
+.pds-border-radius-md {
+  border-radius: var(--pine-border-radius-md);
+}
+
+.pds-border-radius-lg {
+  border-radius: var(--pine-border-radius-lg);
+}
+
+.pds-border-radius-circle {
+  border-radius: 50%;
+}
+
+// Box shadow helpers
+.pds-shadow-xs {
+  box-shadow: var(--pine-box-shadow-xs);
+}
+
+.pds-shadow-sm {
+  box-shadow: var(--pine-box-shadow-sm);
+}
+
+.pds-shadow-md {
+  box-shadow: var(--pine-box-shadow-md);
+}
+
+.pds-shadow-lg {
+  box-shadow: var(--pine-box-shadow-lg);
+}
+
+// Gap helpers
+.pds-box-gap-none {
+  gap: 0;
+}
+
+.pds-box-gap-xxs {
+  gap: var(--box-gap-xxs);
+}
+
+.pds-box-gap-xs {
+  gap: var(--box-gap-xs);
+}
+
+.pds-box-gap-sm {
+  gap: var(--box-gap-sm);
+}
+
+.pds-box-gap-md {
+  gap: var(--box-gap-md);
+}
+
+.pds-box-gap-lg {
+  gap: var(--box-gap-lg);
+}
+
+.pds-box-gap-xl {
+  gap: var(--box-gap-xl);
+}
+
+.pds-box-gap-xxl {
+  gap: var(--box-gap-2xl);
+}
+
+// Spacing helpers
+.pds-padding-none {
+  padding: 0;
+}
+
+.pds-padding-xxs {
+  padding: var(--box-gap-xxs);
+}
+
+.pds-padding-xs {
+  padding: var(--box-gap-xxs);
+}
+
+.pds-padding-sm {
+  padding: var(--box-gap-sm);
+}
+
+.pds-padding-md {
+  padding: var(--box-gap-md);
+}
+
+.pds-padding-lg {
+  padding: var(--box-gap-lg);
+}
+
+.pds-padding-xl {
+  padding: var(--box-gap-xl);
+}
+
+.pds-padding-xxl {
+  padding: var(--box-gap-2xl);
+}
+
+// Display helpers
+.pds-box-display-flex {
+  display: flex;
+}
+
+.pds-box-display-inline-flex {
+  display: inline-flex;
+}
+
+// Flex Direction helpers
+.pds-box-direction-row {
+  flex-direction: row;
+}
+
+.pds-box-direction-column {
+  flex-direction: column;
+}
+
+// Justify Content helpers
+.pds-justify-content-start {
+  justify-content: start;
+}
+
+.pds-justify-content-center {
+  justify-content: center;
+}
+
+.pds-justify-content-end {
+  justify-content: end;
+}
+
+.pds-justify-content-space-between {
+  justify-content: space-between;
+}
+
+.pds-justify-content-space-around {
+  justify-content: space-around;
+}
+
+.pds-justify-content-space-evenly {
+  justify-content: space-evenly;
+}
+
+// Align Items helpers
+.pds-align-items-start {
+  align-items: start;
+}
+
+.pds-align-items-center {
+  align-items: center;
+}
+
+.pds-align-items-end {
+  align-items: end;
+}
+
+.pds-align-items-stretch {
+  align-items: stretch;
+}
+
+.pds-align-items-baseline {
+  align-items: baseline;
+}