Skip to content

Commit

Permalink
fix: try removing wc netlify config
Browse files Browse the repository at this point in the history
  • Loading branch information
davidmenendez committed Oct 25, 2024
1 parent 7a95356 commit 7ba6c2f
Show file tree
Hide file tree
Showing 2 changed files with 296 additions and 10 deletions.
10 changes: 0 additions & 10 deletions packages/ibm-products-web-components/netlify.toml
Original file line number Diff line number Diff line change
@@ -1,10 +0,0 @@
# Netlify build and deploy settings - https://docs.netlify.com/configure-builds/file-based-configuration/#sample-file
[build]
command = "yarn build:storybook"
publish = "storybook-static"
ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF packages/ibm-products-web-components"

[build.environment]
NODE_VERSION="20"
YARN_ENABLE_GLOBAL_CACHE = "true"
YARN_GLOBAL_FOLDER = "/opt/buildhome/.yarn_cache"
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,299 @@
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

$css--plex: true !default;

/* Other Carbon settings. */
@use '@carbon/styles/scss/reset';
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/motion' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/utilities/ai-gradient' as *;
@use '@carbon/styles/scss/utilities/convert' as *;
@use 'sass:map';

$prefix: 'c4p';
$carbon-prefix: 'cds';
@use '@carbon/ibm-products-styles/scss/components/ActionSet/index' as *;
@use '@carbon/ibm-products-styles/scss/components/SidePanel/index' as *;
@use '@carbon/ibm-products-styles/scss/components/SidePanel/side-panel-variables'
as spv;

$block-class: #{$prefix}--side-panel;
$block-class-action-set: #{$prefix}--action-set;

:host(#{$prefix}-side-panel) {
/* Replaces use of Framer for slide in / out animation */
--#{$block-class}--displaced: 100%;

* {
/* not sure why things are coming out as content-box */
box-sizing: border-box;
}

.#{$block-class} {
@extend .#{$block-class};

/* for actions container query - note this changes the size calculation */
container-name: side-panel;
container-type: inline-size;

&[placement='left'] {
--#{$block-class}--displaced: -100%;
}

&[opening] {
transform: translateX(var(--#{$block-class}--displaced));
}

&[open] {
transform: translateX(0);
transition: all $duration-moderate-02 motion(standard, productive);
}

@media screen and (prefers-reduced-motion: reduce) {
&[open] {
transition: none;
}
}

&[closing] {
transform: translateX(var(--#{$block-class}--displaced));
transition: all $duration-moderate-01 motion(exit, productive);
}

@media screen and (prefers-reduced-motion: reduce) {
&[closing] {
transition: none;
}
}

&[placement='right'] {
@extend .#{$block-class}--right-placement;

/* remove if https://github.com/carbon-design-system/ibm-products/pull/3983 merged */
border-inline-end: 1px solid $border-subtle-02;
inset-inline-end: 0;
}

/* stylelint-disable-next-line no-duplicate-selectors -- disabled to keep close to 'right' setting */
&[placement='left'] {
@extend .#{$block-class}--left-placement;

/* remove if https://github.com/carbon-design-system/ibm-products/pull/3983 merged */
border-inline-end: 1px solid $border-subtle-02;
inset-inline-start: 0;
}

@each $size, $size_value in spv.$side-panel-sizes {
&[size='#{$size}'] {
@extend .#{$block-class}--#{$size};
}
}

&[condensed-actions] {
@extend .#{$block-class}--condensed-actions;
}
}

#{$prefix}-layer {
display: contents;
}

.#{$block-class}__overlay {
&[opening] {
opacity: 0;
}

@media screen and (prefers-reduced-motion: reduce) {
&[open] {
opacity: 1;
transition: none;
}
}

&[open] {
opacity: 1;
transition: all $duration-moderate-02 motion(standard, productive);
}
@media screen and (prefers-reduced-motion: reduce) {
&[closing] {
opacity: 0;
transition: none;
}
}

&[closing] {
opacity: 0;
transition: all $duration-moderate-01 motion(exit, productive);
}
}

.#{$block-class}__header {
&::before {
z-index: 99; /* must be higher than action toolbar */
}

&[detail-step] {
@extend .#{$block-class}__header--on-detail-step;
}

&[no-title-animation] {
@extend .#{$block-class}__header--no-title-animation;
// inset-block-start: 0;
}

&[reduced-motion] {
@extend .#{$block-class}__header--reduced-motion;
}

&[has-action-toolbar] {
margin-block-end: $spacing-03;
padding-block-end: 0;
}
}

.#{$block-class} .#{$block-class}__header[has-action-toolbar]::before {
content: initial; /* remove border below */
}

.#{$block-class}__subtitle-text {
&[hidden] {
@extend .#{$carbon-prefix}--visually-hidden !optional;
}
}

.#{$block-class}__action-toolbar {
margin-block-end: 0;
padding-inline-start: 0;

&[hidden] {
@extend .#{$carbon-prefix}--visually-hidden !optional;
}
}

.#{$block-class} .#{$block-class}__action-toolbar[hidden] {
@extend .#{$carbon-prefix}--visually-hidden !optional;
}

.#{$block-class}[has-slug] {
@extend .#{$block-class}--has-slug;
}

[scrolls] {
@extend .#{$block-class}--scrolls;
}

.#{$block-class}__body-content {
@extend .#{$block-class}__body-content;
}

@mixin actions-placement() {
--flex-direction: row;
/* non carbon for IBM Products adjustment */
flex-direction: var(--flex-direction);

::slotted(#{$prefix}-button) {
flex: 0 1 25%;
max-inline-size: to-rem(232px);
}

::slotted(#{$prefix}-button[kind='ghost']) {
flex: 1 1 25%;
max-inline-size: none;
}

::slotted(#{$prefix}-button[hidden]) {
@extend .#{$carbon-prefix}--visually-hidden !optional;

display: none;
}

// -1 in @container query is for 1px left border
@container (width <= #{map.get(spv.$side-panel-sizes, lg)}) {
&:not([actions-multiple='triple']) ::slotted(#{$carbon-prefix}-button) {
// double and single on lg use 50%
flex: 0 1 50%;
max-inline-size: none;
}
}

// -1 in @container query is for 1px left border
@container (width <= #{map.get(spv.$side-panel-sizes, md)}) {
// md is 50% for two and 100% for one
// column for triple
&[actions-multiple] ::slotted(#{$carbon-prefix}-button) {
flex: 0 0 100%;
max-inline-size: none;
}

&[actions-multiple='double'] ::slotted(#{$carbon-prefix}-button) {
flex: 0 1 50%;
max-inline-size: none;
}

&[actions-multiple='triple'] {
--flex-direction: column;

::slotted(#{$carbon-prefix}-button) {
flex: initial;
inline-size: 100%;
max-inline-size: none;
}
}
}

// -1 in @container query is for 1px left border
@container (width <= #{map.get(spv.$side-panel-sizes, sm)}) {
--flex-direction: column;

::slotted(#{$carbon-prefix}-button) {
flex: initial;
inline-size: 100%;
max-inline-size: none;
}
}
}

.#{$block-class}__actions-container {
@extend .#{$block-class-action-set};
@include actions-placement();

display: flex;
inline-size: 100%;

::slotted(#{$carbon-prefix}-button) {
@extend .#{$block-class-action-set}__action-button;
}

&[hidden] {
@extend .#{$carbon-prefix}--visually-hidden !optional;

display: none;
}

$multiples: 'single' 'double' 'triple';
@each $m in $multiples {
&[actions-multiple='#{$m}'] {
@extend .#{$carbon-prefix}--action-set--row-#{$m} !optional;
}
}

$sizes: 'xs' 'sm';
@each $s in $sizes {
&[size='#{$s}'] {
@extend .#{$block-class-action-set}--#{$s} !optional;
}
}
}

.sentinel {
@extend .#{$carbon-prefix}--visually-hidden !optional;
}

.#{$block-class}__close-button {
width: 2rem;
}
}

0 comments on commit 7ba6c2f

Please sign in to comment.