Merge branch 'main' into field-base/select

.changeset/pink-otters-leave.md

@@ -0,0 +1,5 @@
+---
+'@sebgroup/green-core': minor
+---
+
+**GdsText:** Inherit all style expression props from GdsContainer

libs/angular/.eslintrc.json

@@ -1,6 +1,9 @@
 {
   "extends": ["../../.eslintrc.json"],
   "ignorePatterns": ["!**/*", "storybook-static"],
+  "rules": {
+    "no-console": "error"
+  },
   "overrides": [
     {
       "files": ["*.ts"],

libs/angular/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 5.1.2
+
+### Patch Changes
+
+- 1bf0d07: **nggCoreElement**: Remove console.log
+
 ## 5.1.1
 
 ### Patch Changes

libs/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sebgroup/green-angular",
-  "version": "5.1.1",
+  "version": "5.1.2",
   "peerDependencies": {
     "@angular/cdk": ">=17.3.10",
     "@angular/common": ">=17.3.12",

libs/angular/src/lib/datepicker/datepicker.stories.ts

@@ -1,3 +1,4 @@
+/* eslint no-console: "off" */
 // Datepicker.stories.ts
 import {
   FormControl,

libs/angular/src/lib/dropdown/dropdown.stories.ts

@@ -1,3 +1,4 @@
+/* eslint no-console: "off" */
 // Dropdown.stories.ts
 import {
   FormControl,

libs/angular/src/lib/shared/core-element/core-element.directive.ts

@@ -30,7 +30,6 @@ export class NggCoreElementDirective implements OnInit {
 
       const originalCreateElement = this.renderer.createElement
       this.renderer.createElement = (name: string, _namespace: string) => {
-        console.log('createElement', getScopedTagName(name))
         return this.document.createElement(getScopedTagName(name))
       }
 

libs/angular/src/lib/sortable-list/sortable-list.stories.ts

@@ -1,3 +1,4 @@
+/* eslint no-console: "off" */
 import { DragDropModule } from '@angular/cdk/drag-drop'
 import { CommonModule } from '@angular/common'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'

libs/chlorophyll/README.md

@@ -1,6 +1,6 @@
 <div align="center">
 <img width="600" alt="chlorophyll" src="https://github.com/seb-oss/green/assets/11420341/8368cfdf-5335-42b3-9a7f-b03fd0d6433b">
-<h1>@sebgroup/green-core</h1>
+<h1>@sebgroup/chlorophyll</h1>
 <p>
 Chlorophyll a styling framework for Green Design System front-end components. It is primarily used to style the components in the React and Angular libraries, but also contains grid and utility classes.
 </p>

libs/core/.eslintrc.json

@@ -1,5 +1,8 @@
 {
   "extends": ["../../.eslintrc.json"],
+  "rules": {
+    "no-console": "error"
+  },
   "ignorePatterns": [
     "!**/*",
     "storybook-static",

libs/core/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.62.5
+
+### Patch Changes
+
+- e18b5a8: **Utils:style-expression-property:** Safe guard falsy values
+
+## 1.62.4
+
+### Patch Changes
+
+- d359d06: **Button:** Fix width styling issue in 2016 design
+
 ## 1.62.3
 
 ### Patch Changes

libs/core/build-scripts/tokens-color.js

@@ -1,3 +1,4 @@
+/* eslint no-console: "off" */
 const fs = require('fs')
 
 // Read the input JSON from update.json

libs/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "1.62.3",
+  "version": "1.62.5",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

libs/core/src/components/button/button.trans.styles.scss

@@ -24,6 +24,7 @@ $button-danger-border: tokens.get(tokens.$red, 0);
       display: flex;
       gap: 0.5rem;
       text-decoration: none;
+      width: 100%;
     }
 
     .button slot:not([name]) {

libs/core/src/components/coachmark/coachmark.ts

@@ -294,6 +294,7 @@ export class GdsCoachmark extends GdsElement {
         )
       })
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.warn('failed to render tooltips')
     }
   }

libs/core/src/components/form/summary/summary.test.ts

@@ -58,8 +58,6 @@ describe('<gds-form-summary>', () => {
       await dropdownEl.updateComplete
       await summaryEl.updateComplete
 
-      console.log(formEl)
-
       expect(summaryEl.shadowRoot?.querySelector('li')).to.exist
       expect(summaryEl.shadowRoot?.querySelector('li')?.textContent).to.equal(
         'Dropdown label',

libs/core/src/components/text/text.ts

@@ -6,6 +6,7 @@ import { GdsElement } from '../../gds-element'
 import { tokens } from '../../tokens.style'
 import { styleExpressionProperty } from '../../utils/decorators/style-expression-property'
 import { gdsCustomElement } from '../../utils/helpers/custom-element-scoping'
+import { GdsContainer } from '../container'
 import { defaultStyles } from './default-typography.styles'
 import textStyles from './text.style'
 
@@ -18,7 +19,7 @@ import textStyles from './text.style'
  *
  */
 @gdsCustomElement('gds-text')
-export class GdsText extends GdsElement {
+export class GdsText extends GdsContainer {
   static styles = [tokens, defaultStyles, textStyles]
 
   /**
@@ -103,18 +104,6 @@ export class GdsText extends GdsElement {
   })
   'font-weight'?: string
 
-  /**
-   * Controls the margin of the text.
-   * Supports all the default margin values.
-   *
-   * @property margin
-   */
-  @styleExpressionProperty({
-    property: 'margin',
-    valueTemplate: (v) => v,
-  })
-  margin?: string
-
   /**
    * Controls the text-wrap property of the text.
    * Supports all valid CSS text-wrap values.
@@ -139,36 +128,6 @@ export class GdsText extends GdsElement {
   })
   'text-transform'?: string
 
-  /**
-   * Controls the max length of the text in characters.
-   * Length is by defualt in characters to keep conistency with the text content.
-   *
-   * You can apply length like this:
-   *
-   * ```html
-   * <gds-text max-width="50"></gds-text>
-   * ```
-   *
-   * @property length
-   */
-  @styleExpressionProperty({
-    property: 'max-width',
-    valueTemplate: (v) => `${v}ch`,
-  })
-  'max-width'?: string
-
-  /**
-   * Controls the max-width property of the text.
-   * Supports all valid CSS max-width values.
-   *
-   * @property max
-   */
-  @styleExpressionProperty({
-    property: 'min-width',
-    valueTemplate: (v) => `${v}ch`,
-  })
-  'min-width'?: string
-
   /**
    * Controls the text-align property of the text.
    * Supports all valid CSS text-align values.

libs/core/src/storybook-docs/guides/installing.mdx

@@ -116,6 +116,22 @@ import { NggCoreRendererFactory } from '@sebgroup/green-angular/src/lib/shared'
 })
 ```
 
+Or, if you are only using standalone components, you can either create a root app module and provide the renderer there, or you can provide it in bootstrapping:
+
+```ts
+// app.config.ts
+const appConfig: ApplicationConfig = {
+  providers: [...other providers..., {
+    provide: RendererFactory2,
+    useClass: NggCoreRendererFactory,
+  }]
+};
+
+// main.ts
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));
+```
+
 Now you can use Green Core components in your template without any special directive:
 
 ```html

libs/core/src/utils/decorators/style-expression-property.ts

@@ -69,6 +69,7 @@ export function styleExpressionProperty(
         return this['__' + String(descriptor)]
       },
       set: async function (newValue) {
+        if (!newValue) return
         this['__' + String(descriptor)] = newValue
         await this.updateComplete
 

libs/core/src/utils/helpers/style-expression-parser-tester.ts

@@ -1,3 +1,4 @@
+/* eslint no-console: "off" */
 // This file is here to help with development of the style expression parser, since the regular
 // tests are a bit clunky for this kind of work.
 //

libs/core/src/utils/helpers/style-expression-parser.ts

@@ -32,7 +32,7 @@ const whitespace = [' ', '/n']
  * @param source The source string to tokenize
  * @returns An array of tokens
  */
-export function tokenize(source: string): Tokens {
+export function tokenize(source = ''): Tokens {
   const lexemes = []
   let scanned = ''
 

libs/react/.eslintrc.json

@@ -1,6 +1,9 @@
 {
   "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
   "ignorePatterns": ["!**/*", "storybook-static"],
+  "rules": {
+    "no-console": "error"
+  },
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

libs/react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 3.23.0
+
+### Minor Changes
+
+- 23f052c: **SegmentedControl**: Update to match core component
+
 ## 3.22.0
 
 ### Minor Changes

libs/react/package.json

@@ -2,7 +2,7 @@
   "name": "@sebgroup/green-react",
   "main": "./src/index.js",
   "module": "./src/index.js",
-  "version": "3.22.0",
+  "version": "3.23.0",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"

libs/react/src/lib/context-menu/context-menu.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint no-console: "off" */
 import { ContextMenu, MenuItem } from './context-menu'
 
 const Template = ({ children, ...props }) => (

libs/react/src/lib/dropdown/dropdown.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint no-console: "off" */
 import React from 'react'
 
 import { Dropdown } from './dropdown'

libs/react/src/lib/form/radioButton/radioButton.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint no-console: "off" */
 import { RadioButton } from './radioButton'
 import { RadioGroup } from './radioGroup'
 

libs/react/src/lib/form/radioButton/radioGroup.tsx

@@ -29,8 +29,10 @@ export const RadioGroup = ({
   defaultSelected,
   valueSelected,
   label,
+  /** @deprecated use `label` instead */
   title,
   labelInformation,
+  /** @deprecated use `labelInformation` instead */
   description,
   expandableInfo,
   expandableInfoButtonLabel,
@@ -41,13 +43,6 @@ export const RadioGroup = ({
   horizontal,
   children,
 }: React.PropsWithChildren<RadioGroupProps>) => {
-  if (title)
-    console.warn('"title" prop is deprecated. Please use "label" instead.')
-  if (description)
-    console.warn(
-      '"description" prop is deprecated. Please use "labelInformation" instead.',
-    )
-
   const [selected, setSelected] = useState<string | undefined>(
     valueSelected ?? defaultSelected,
   )

libs/react/src/lib/modal/modal.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint no-console: "off" */
 import React from 'react'
 import { useArgs } from '@storybook/preview-api'
 import { Meta, Story } from '@storybook/react/types-6-0'

libs/react/src/lib/segmented-control/segmented-control.mdx

@@ -37,14 +37,14 @@ There is a small and a medium version which can be configured using the `size` p
 
 ### Segment Size
 
-The size of the segments can be configured using the `segMinWidth` prop. This influences how many segments will be visible at the same time.
-If you have long segment labels and want to avoid concatenation, you can increase the `segMinWidth` prop.
-But keep in mind that the best practice is to keep the segment labels short.
+Segments can have different widths depending on the content, and if there are too many segments to fit in the container, scroll buttons will appear to the left and/or right.
 
-<SegmentedControl segMinWidth={200}>
+Segment with can also be controlled individually on the segments using the `width`, `min-width` and `max-width` Style Expression properties.
+
+<SegmentedControl>
   <Segment value="1">1 month</Segment>
   <Segment value="2">This year</Segment>
-  <Segment value="3">1 year</Segment>
+  <Segment value="3" min-width='350px' >1 year</Segment>
   <Segment value="4">3 years</Segment>
   <Segment value="5">5 years</Segment>
   <Segment value="6">10 years</Segment>
@@ -57,7 +57,6 @@ Available `SegmentedControl` component props
   | Props        | Type                                                                    | Description                    |
   | :----------- | :---------------------------------------------------------------------- | :----------------------------- |
   |  value       | \` string \`                                                            | The value of the currently selected segment. Setting this property will select the segment with the matching value.  |
-  |  segMinWidth | \` number \`                                                            | Minimum width of each segment. Used for calculating the number of visible segments that can fit based on the available space. |
   |  size        | \` small | medium \`                                                    | Size of the segmented control |
   |  onChange    | \` (event: Event) => void \`                                            | Fires when the selected segment is changed, use \` event.target.value \` to retrive the value         |
   |  className   | \` string \`                                                            | Component className         |
@@ -77,5 +76,8 @@ Available `Segment` component props
   |  className   | \` string \`                                                            | Component className         |
   |  disabled    | \` boolean \`                                                           | To disabled segment button |
   |  children    | \` ReactNode | ReactNode[] \`                                           | Pass down labels or Reactnode as child |
+  |  width       | \` string \`                                                            | Controls the \` width \` css property of the segment. |
+  |  min-width   | \` string \`                                                            | Controls the \` min-width \` css property of the segment. |
+  |  max-width   | \` string \`                                                            | Controls the \` max-width \` css property of the segment. |
   `}
 </Markdown>

libs/react/src/lib/segmented-control/segmented-control.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint no-console: "off" */
 import { provideProtractorTestingSupport } from '@angular/platform-browser'
 
 import { Segment, SegmentedControl } from './segmented-control'