@progressiveui/styles 10.30.0

package/scss/components/story/_story.scss

@@ -0,0 +1,519 @@
+@use "../../config" as *;
+@use "../../spacing" as *;
+@use "../../motion" as *;
+@use "../../type" as *;
+@use "../../breakpoint" as *;
+@use "../../theme" as *;
+@use "../../utilities/component-reset";
+@use "../../utilities/convert" as *;
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/high-contrast-mode" as *;
+@use "../../utilities/skeleton" as *;
+@use "../link";
+
+/// Story styles
+/// @access public
+/// @group story
+@mixin text {
+  // TODO: Apply changes
+  > code {
+    @extend .#{$prefix}--story__code;
+  }
+  > p {
+    @extend .#{$prefix}--story__p;
+  }
+
+  > h2 {
+    @extend .#{$prefix}--text__story-h2;
+  }
+
+  i {
+    @extend .#{$prefix}--text__story-italic;
+  }
+
+  h1 {
+    @extend .#{$prefix}--text__story-h1;
+  }
+
+  h3 {
+    @extend .#{$prefix}--text__story-h3;
+  }
+
+  h4 {
+    @extend .#{$prefix}--text__story-h4;
+  }
+
+  h5 {
+    @extend .#{$prefix}--text__story-h5;
+  }
+
+  > a {
+    @extend .#{$prefix}--story__a;
+  }
+
+  sup {
+    @extend .#{$prefix}--story__sup;
+  }
+
+  em {
+    @extend .#{$prefix}--text__story-italic;
+  }
+  b,
+  strong {
+    @extend .#{$prefix}--story__b;
+  }
+
+  /* All the line spacings */
+
+  .#{$prefix}--blockquote {
+    & + p,
+    & + h3 {
+      margin-top: $spacing-06;
+    }
+  }
+
+  p + .#{$prefix}--blockquote {
+    margin-top: $spacing-04;
+  }
+
+  p + h2 {
+    margin-top: $spacing-08;
+  }
+
+  p + iframe {
+    margin-top: $spacing-06;
+  }
+
+  ul + div {
+    margin-top: $spacing-07;
+  }
+
+  ul + h2 {
+    margin-top: $spacing-07;
+  }
+
+  p + h3 {
+    margin-top: $spacing-08;
+  }
+
+  > p + .#{$prefix}--btn {
+    margin-top: $spacing-05;
+  }
+
+  p + table {
+    margin-top: $spacing-05;
+  }
+
+  p + pre {
+    margin-top: $spacing-05;
+  }
+
+  p + div {
+    margin-top: $spacing-05;
+  }
+
+  > div + div {
+    margin-top: $spacing-05;
+  }
+
+  h1 + h2 {
+    margin-top: $spacing-06;
+  }
+
+  h2 + h3 {
+    margin-top: $spacing-06;
+  }
+
+  p + ul,
+  h3 + ul,
+  h4 + ul {
+    margin-top: $spacing-05;
+  }
+
+  h3 + p {
+    margin-top: $spacing-04;
+  }
+
+  button + p {
+    margin-top: $spacing-05;
+  }
+
+  div + h4,
+  h3 + h4 {
+    margin-top: $spacing-06;
+  }
+
+  .#{$prefix}--story__h4 + div,
+  h4 + div {
+    margin-top: $spacing-05;
+  }
+
+  > h1 + div,
+  > h2 + div,
+  > h3 + div,
+  > h4 + div,
+  > h5 + div {
+    margin-top: $spacing-05;
+  }
+
+  > h1 + .#{$prefix}--list,
+  > h2 + .#{$prefix}--list,
+  > h3 + .#{$prefix}--list,
+  > h4 + .#{$prefix}--list,
+  > h5 + .#{$prefix}--list,
+  .#{$prefix}--story__h1 + .#{$prefix}--list,
+  .#{$prefix}--story__h2 + .#{$prefix}--list,
+  .#{$prefix}--story__h3 + .#{$prefix}--list,
+  .#{$prefix}--story__h4 + .#{$prefix}--list,
+  .#{$prefix}--story__h5 + .#{$prefix}--list {
+    margin-top: $spacing-05;
+  }
+
+  > h1 + .#{$prefix}--code-block,
+  > h2 + .#{$prefix}--code-block,
+  > h3 + .#{$prefix}--code-block,
+  > h4 + .#{$prefix}--code-block,
+  > h5 + .#{$prefix}--code-block,
+  .#{$prefix}--story__h1 + .#{$prefix}--code-block,
+  .#{$prefix}--story__h2 + .#{$prefix}--code-block,
+  .#{$prefix}--story__h3 + .#{$prefix}--code-block,
+  .#{$prefix}--story__h4 + .#{$prefix}--code-block,
+  .#{$prefix}--story__h5 + .#{$prefix}--code-block {
+    margin-top: $spacing-05;
+  }
+
+  .#{$prefix}--code-block + .#{$prefix}--code-block {
+    margin-top: $spacing-05;
+  }
+
+  h1 + iframe,
+  h2 + iframe,
+  h3 + iframe,
+  h4 + iframe,
+  h5 + iframe {
+    margin-top: $spacing-03;
+  }
+
+  iframe + h1,
+  iframe + h2,
+  iframe + h3,
+  iframe + h4,
+  iframe + h5 {
+    margin-top: $spacing-05;
+  }
+
+  .#{$prefix}--story__list {
+    list-style-position: outside;
+    line-height: 1.6em;
+    margin: $spacing-05 0 $spacing-05 1.5em;
+
+    li {
+      list-style-type: disc;
+    }
+  }
+
+  .#{$prefix}--story__sub-heading {
+    @include type-style("heading-01");
+    font-weight: normal;
+    color: $text-body-secondary;
+    margin-top: $spacing-02 !important;
+    margin-bottom: $spacing-02;
+    font-style: italic;
+    //text-transform: uppercase;
+    font-weight: 400;
+
+    //letter-spacing: 0.05em;
+  }
+
+  .#{$prefix}--story__type-beta {
+    margin-bottom: $spacing-06;
+  }
+
+  .#{$prefix}--markup {
+    font-style: italic;
+    @include type-style("heading-02");
+    margin-bottom: $spacing-06;
+  }
+
+  .#{$prefix}--inline-highlight {
+    display: inline-block;
+    font-weight: 600;
+    background: var(--ui-03);
+    padding: 0.05em 0.1em;
+  }
+
+  .#{$prefix}--story__divider {
+    border: 1px solid var(--ui-04);
+  }
+
+  .#{$prefix}--story__divider--lg {
+    border: 2px solid var(--ui-04);
+  }
+}
+
+@mixin typo($name) {
+  /*font-size: $typography-headings-heading-1-font-size;
+  text-decoration: $typography-headings-heading-1-text-decoration;
+  font-family: $typography-headings-heading-1-font-family;
+  font-weight: $typography-headings-heading-1-font-weight;
+  font-style: $typography-headings-heading-1-font-style;
+  font-stretch: $typography-headings-heading-1-font-stretch;
+  letter-spacing: $typography-headings-heading-1-letter-spacing;
+  line-height: $typography-headings-heading-1-line-height;*/
+}
+
+@mixin story {
+  .#{$prefix}--story {
+    @include reset;
+    @include font-family("sans");
+    //-webkit-font-smoothing: antialiased;
+    //-moz-osx-font-smoothing: grayscale;
+    &__center {
+      text-align: center;
+    }
+
+    &__full-height {
+      min-height: 65vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    @include text;
+  }
+  .#{$prefix}--text {
+    @include text;
+  }
+
+  .#{$prefix}--story__a {
+    color: $action-default-link-default;
+    &:hover {
+      text-decoration: underline;
+    }
+    //@extend .#{$prefix}--link;
+  }
+
+  a.#{$prefix}--btn {
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .#{$prefix}--blockquote {
+    p {
+      margin: 0;
+    }
+  }
+
+  .#{$prefix}--text__story-title {
+    @include type-style("story-title");
+    margin-bottom: $spacing-07;
+    margin-left: -0.058em;
+    font-weight: 500;
+  }
+
+  .#{$prefix}--helper {
+    @include type-style("helper");
+  }
+
+  .#{$prefix}--text__body-regular {
+    @include type-style("body-regular");
+  }
+
+  .#{$prefix}--text__input {
+    @include type-style("input");
+  }
+
+  .#{$prefix}--story__content-title {
+    @include type-style("productive-heading-05");
+    margin-bottom: $spacing-06;
+    margin-left: -0.058em;
+  }
+
+  .#{$prefix}--text__story-sub-title {
+    @include type-style("story-sub-title");
+    color: $action-default-fill-primary-default;
+    margin-top: $spacing-07;
+    margin-bottom: $spacing-02;
+  }
+
+  .#{$prefix}--story__code {
+    @include type-style("code-02");
+    @include font-family("code");
+    padding: 0.1rem 0.4em;
+    margin: 0;
+    font-size: 95%;
+    border-radius: 0.2em;
+    background: $code-background;
+    //background: rgba(#111f30, 0.08);
+  }
+
+  .#{$prefix}--story__pre {
+    padding: 0.8em;
+    overflow: auto;
+    font-size: 85%;
+    line-height: 1.45;
+    background: $code-background;
+    border-radius: 6px;
+    .#{$prefix}--story__code,
+    code {
+      @include type-style("code-02");
+      @include font-family("code");
+      display: inline;
+      max-width: auto;
+      padding: 0;
+      margin: 0;
+      overflow: visible;
+      line-height: inherit;
+      word-wrap: normal;
+      background-color: transparent;
+      border: 0;
+      font-size: 100%;
+    }
+  }
+
+  .#{$prefix}--story__p {
+    margin-top: $spacing-05;
+    line-height: 1.6em;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .#{$prefix}--text__story-italic {
+    font-style: italic;
+  }
+
+  .#{$prefix}--text__story-h1 {
+    @include type-style("story-h1");
+  }
+
+  .#{$prefix}--text__story-h2 {
+    @include type-style("story-h2");
+    margin-top: $spacing-07;
+
+    &.before--img {
+      margin-bottom: 0;
+    }
+  }
+
+  .#{$prefix}--text__story-h3 {
+    margin-top: $spacing-07;
+    @include type-style("story-h3");
+    // font-size: $typography-body-copy-16px-bold-font-weight;
+    // font-weight: $typography-body-copy-16px-bold-font-weight;
+  }
+
+  .#{$prefix}--text__story-h4 {
+    margin-top: $spacing-06;
+    @include type-style("story-h4");
+  }
+
+  .#{$prefix}--text__story-h5 {
+    margin-top: $spacing-06;
+    @include type-style("story-h5");
+  }
+
+  .#{$prefix}--text__story-h6 {
+    margin-top: $spacing-06;
+    @include type-style("story-h6");
+  }
+
+  .#{$prefix}--story__caption {
+    @include type-style("caption");
+  }
+
+  .#{$prefix}--story__sup {
+    font-size: 0.7em;
+    background: var(--ui-03);
+    vertical-align: top;
+    position: relative;
+    top: -0.5em;
+
+    > a {
+      text-decoration: none;
+
+      &:before {
+        content: "[";
+      }
+
+      &:after {
+        content: "]";
+      }
+    }
+  }
+
+  .#{$prefix}--story__inline-highlight {
+    display: inline-block;
+    font-weight: 600;
+    background: var(--ui-03);
+    padding: 0.05em 0.1em;
+  }
+
+  .docblock-source {
+    margin-top: $spacing-03 !important;
+  }
+  .#{$prefix}--story__bold {
+    font-weight: 600;
+  }
+
+  .#{$prefix}--story__b,
+  .#{$prefix}--story__strong {
+    font-weight: 600;
+  }
+
+  $spacing-baseline: 1rem !default;
+
+  $spacing-3xs: $spacing-baseline * 0.125 !default;
+  $spacing-2xs: $spacing-baseline * 0.25 !default;
+  $spacing-xs: $spacing-baseline * 0.5 !default;
+  $spacing-sm: $spacing-baseline * 0.75 !default;
+  $spacing-md: $spacing-baseline !default;
+  $spacing-lg: $spacing-baseline * 1.5 !default;
+  $spacing-xl: $spacing-baseline * 2 !default;
+  $spacing-2xl: $spacing-baseline * 2.5 !default;
+  $spacing-3xl: $spacing-baseline * 3 !default;
+  $spacing-4xl: $spacing-baseline * 4 !default;
+  $spacing-5xl: $spacing-baseline * 5 !default;
+  $spacing-6xl: $spacing-baseline * 6 !default;
+
+  $spacing-map: (
+    "none": 0,
+    "3xs": $spacing-3xs,
+    "2x": $spacing-2xs,
+    "xs": $spacing-xs,
+    "sm": $spacing-sm,
+    "md": $spacing-md,
+    "lg": $spacing-lg,
+    "xl": $spacing-xl,
+    "2xl": $spacing-2xl,
+    "3xl": $spacing-3xl,
+    "4xl": $spacing-4xl,
+    "5xl": $spacing-5xl,
+    "6xl": $spacing-6xl,
+  );
+
+  /*
+  @mixin spacing($size, $position) {
+    @if map-has-key($spacing-map, $size) {
+      @if $positon == 'bottom' {
+        margin-bottom: map-get($spacing-map, $size);
+      }
+    } @else {
+      @warn 'This is not a step of the WFP Spacing Scale!';
+    }
+  }
+*/
+  // TODO Look into it later
+  @each $size, $glyph in $spacing-map {
+    .#{$prefix}--story__spacing-top-#{$size},
+    .#{$prefix}--text__spacing-top-#{$size} {
+      margin-top: map-get($spacing-map, $size) !important;
+    }
+    .#{$prefix}--story__spacing-bottom-#{$size},
+    .#{$prefix}--text__spacing-bottom-#{$size} {
+      margin-bottom: map-get($spacing-map, $size) !important;
+    }
+  }
+}

package/scss/components/structured-list/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'structured-list';
+@use 'structured-list';
+
+@include structured-list.structured-list;

package/scss/components/structured-list/_mixins.scss

@@ -0,0 +1,59 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '../../spacing' as *;
+
+// Structured List
+
+/// @type Number
+/// @access public
+/// @group structured-list
+$structured-list-padding: 2rem !default;
+
+/// @type Value
+/// @access public
+/// @group structured-list
+$structured-list-text-transform: none !default;
+
+/// Used only for `.#{prefix}--structured-list--condensed`
+/// @access private
+/// @group structured-list
+/// @param {Number} $padding [$structured-list-padding]
+@mixin padding-td--condensed($padding: $structured-list-padding) {
+  padding: $padding * 0.25;
+}
+
+/// Used only for [data-structured-list]
+/// @access private
+/// @group structured-list
+/// @param {Number} $padding [$structured-list-padding]
+@mixin padding--data-structured-list($padding: $structured-list-padding) {
+  padding-right: $padding * 0.5;
+  padding-left: $padding * 0.5;
+
+  // Controls gutter sizes for check
+  &:first-child {
+    padding-right: $padding * 0.5;
+    padding-left: $padding * 0.5;
+  }
+}
+
+/// Used only for normal structured-list
+/// @access private
+/// @group structured-list
+/// @param {Number} $padding [$structured-list-padding]
+@mixin padding-th($padding: $structured-list-padding) {
+  padding: $spacing-05 $spacing-03 $spacing-03 $spacing-03;
+}
+
+/// Used only for normal structured-list
+/// @access private
+/// @group structured-list
+/// @param {Number} $padding [$structured-list-padding]
+@mixin padding-td($padding: $structured-list-padding) {
+  padding: $spacing-05 $spacing-03 $spacing-06 $spacing-03;
+}