Merge 4afdacd into 7bc5485

src/Material-Design-Lite-Components-Tests/MDLProgressBarTest.class.st

@@ -1,7 +1,7 @@
 Class {
 	#name : #MDLProgressBarTest,
 	#superclass : #SGTAbstractBrushTest,
-	#category : #'Material-Design-Lite-Components-Tests-loading'
+	#category : #'Material-Design-Lite-Components-Tests-Loading'
 }
 
 { #category : #tests }

src/Material-Design-Lite-Components-Tests/MDLSpinnerTest.class.st

@@ -1,7 +1,7 @@
 Class {
 	#name : #MDLSpinnerTest,
 	#superclass : #SGTAbstractBrushTest,
-	#category : #'Material-Design-Lite-Components-Tests-loading'
+	#category : #'Material-Design-Lite-Components-Tests-Loading'
 }
 
 { #category : #tests }

src/Material-Design-Lite-Demo/MDLAlertsScreen.class.st

@@ -0,0 +1,116 @@
+"
+Description
+--------------------
+
+Component to display some feedback to the user.
+"
+Class {
+	#name : #MDLAlertsScreen,
+	#superclass : #MDLExtensionsDemo,
+	#category : #'Material-Design-Lite-Demo-Extensions'
+}
+
+{ #category : #accessing }
+MDLAlertsScreen class >> description [
+	^ 'Component to display some feedback to the user.'
+]
+
+{ #category : #accessing }
+MDLAlertsScreen class >> icon [
+	^ 'compAlertsPng'
+]
+
+{ #category : #accessing }
+MDLAlertsScreen class >> title [
+	^ 'Alerts'
+]
+
+{ #category : #accessing }
+MDLAlertsScreen >> basicAlerts [
+	^ #('Default' 'Info')
+		inject: OrderedDictionary new
+		into: [ :res :each | 
+			res add: (each , ' alert') -> ('render' , each , 'AlertOn:') asSymbol.
+			res ]
+]
+
+{ #category : #accessing }
+MDLAlertsScreen >> levelAlerts [
+	^ #('Danger' 'Warning' 'Success')
+		inject: OrderedDictionary new
+		into: [ :res :each | 
+			res add: (each , ' alert') -> ('render' , each , 'AlertOn:') asSymbol.
+			res ]
+]
+
+{ #category : #rendering }
+MDLAlertsScreen >> renderDangerAlertOn: html [
+	html mdlAlert
+		beDanger;
+		with: [
+			html strong: 'This is a test message.'.
+			html space.
+			html text: 'This is the rest of the message that should not be strong.'.
+			html anchor
+				callback: [ "Do nothing" ];
+				with: 'This is an anchor' ]
+]
+
+{ #category : #rendering }
+MDLAlertsScreen >> renderDefaultAlertOn: html [
+	html mdlAlert
+		beDefault;
+		with: [
+			html strong: 'This is a test message.'.
+			html space.
+			html text: 'This is the rest of the message that should not be strong.'.
+			html anchor
+				callback: [ "Do nothing" ];
+				with: 'This is an anchor' ]
+]
+
+{ #category : #rendering }
+MDLAlertsScreen >> renderInfoAlertOn: html [
+	html mdlAlert
+		beInfo;
+		with: [ 
+			html strong: 'This is a test message.'.
+			html space.
+			html text: 'This is the rest of the message that should not be strong.'.
+			html anchor
+				callback: [ "Do nothing" ];
+				with: 'This is an anchor' ]
+]
+
+{ #category : #rendering }
+MDLAlertsScreen >> renderScreenContentOn: html [
+	self
+		render: self basicAlerts on: html;
+		render: self levelAlerts on: html
+]
+
+{ #category : #rendering }
+MDLAlertsScreen >> renderSuccessAlertOn: html [
+	html mdlAlert
+		beSuccess;
+		with: [
+			html strong: 'This is a test message.'.
+			html space.
+			html text: 'This is the rest of the message that should not be strong.'.
+			html anchor
+				callback: [ "Do nothing" ];
+				with: 'This is an anchor' ]
+]
+
+{ #category : #rendering }
+MDLAlertsScreen >> renderWarningAlertOn: html [
+	html mdlAlert
+		beWarning;
+		with: [
+			html strong: 'This is a test message.'.
+			html space.
+			html text: 'This is the rest of the message that should not be strong.'.
+			html anchor
+				callback: [ "Do nothing" ];
+				with: 'This is an anchor' ]
+]

src/Material-Design-Lite-Extensions-Tests/MDLAlertTest.class.st

@@ -0,0 +1,65 @@
+Class {
+	#name : #MDLAlertTest,
+	#superclass : #SGTAbstractBrushTest,
+	#category : #'Material-Design-Lite-Extensions-Tests-Alerts'
+}
+
+{ #category : #tests }
+MDLAlertTest >> testBareBrush [
+	self assert: [ :html | html mdlAlert ] generates: '<div class="mdl-alert"></div>'
+]
+
+{ #category : #tests }
+MDLAlertTest >> testBeDanger [
+	self
+		assert: [ :html | 
+			html mdlAlert
+				beDanger;
+				with: 'Test' ]
+		generates: '<div class="mdl-alert mdl-alert__danger">Test</div>'
+]
+
+{ #category : #tests }
+MDLAlertTest >> testBeDefault [
+	self
+		assert: [ :html | 
+			html mdlAlert
+				beDefault;
+				with: 'Test' ]
+		generates: '<div class="mdl-alert mdl-alert__default">Test</div>'
+]
+
+{ #category : #tests }
+MDLAlertTest >> testBeInfo [
+	self
+		assert: [ :html | 
+			html mdlAlert
+				beInfo;
+				with: 'Test' ]
+		generates: '<div class="mdl-alert mdl-alert__info">Test</div>'
+]
+
+{ #category : #tests }
+MDLAlertTest >> testBeSuccess [
+	self
+		assert: [ :html | 
+			html mdlAlert
+				beSuccess;
+				with: 'Test' ]
+		generates: '<div class="mdl-alert mdl-alert__success">Test</div>'
+]
+
+{ #category : #tests }
+MDLAlertTest >> testBeWarning [
+	self
+		assert: [ :html | 
+			html mdlAlert
+				beWarning;
+				with: 'Test' ]
+		generates: '<div class="mdl-alert mdl-alert__warning">Test</div>'
+]
+
+{ #category : #tests }
+MDLAlertTest >> testWithContent [
+	self assert: [ :html | html mdlAlert: 'Test' ] generates: '<div class="mdl-alert">Test</div>'
+]

src/Material-Design-Lite-Extensions/MDLAlert.class.st

@@ -0,0 +1,66 @@
+"
+Description
+--------------------
+
+I am a brush to create alerts.
+
+Alerts are used to display feedback to users. They can have multiple kind of feedback such as:
+- Neutral (default)
+- Information 
+- Success
+- Warning
+- Danger 
+
+Examples
+--------------------
+
+	html mdlAlert
+		beDanger;
+		with: [ 
+					html strong: 'This is a test message.'.
+					html space.
+					html text: 'This is the rest of the message that should not be strong.'.
+					html anchor
+						callback: [ 
+									""Do nothing""
+									 ];
+						with: 'This is an anchor' ]
+
+
+"
+Class {
+	#name : #MDLAlert,
+	#superclass : #MDLDivTag,
+	#category : #'Material-Design-Lite-Extensions-Alerts'
+}
+
+{ #category : #options }
+MDLAlert >> beDanger [
+	self class: 'mdl-alert__danger'
+]
+
+{ #category : #options }
+MDLAlert >> beDefault [
+	self class: 'mdl-alert__default'
+]
+
+{ #category : #options }
+MDLAlert >> beInfo [
+	self class: 'mdl-alert__info'
+]
+
+{ #category : #options }
+MDLAlert >> beSuccess [
+	self class: 'mdl-alert__success'
+]
+
+{ #category : #options }
+MDLAlert >> beWarning [
+	self class: 'mdl-alert__warning'
+]
+
+{ #category : #initialization }
+MDLAlert >> initialize [
+	super initialize.
+	self class: 'mdl-alert'
+]

src/Material-Design-Lite-Extensions/WAHtmlCanvas.extension.st

@@ -2,8 +2,6 @@ Extension { #name : #WAHtmlCanvas }
 
 { #category : #'*Material-Design-Lite-Extensions' }
 WAHtmlCanvas >> leftPanel [
-	"A left panel for Synectique's tools."
-
 	^ self aside
 		class: #'material-design-left-panel';
 		shadow: 2;
@@ -14,3 +12,15 @@ WAHtmlCanvas >> leftPanel [
 WAHtmlCanvas >> leftPanelResizer [
 	self render: MDLLeftPanelResizer new
 ]
+
+{ #category : #'*Material-Design-Lite-Extensions' }
+WAHtmlCanvas >> mdlAlert [
+	^ self brush: MDLAlert new
+]
+
+{ #category : #'*Material-Design-Lite-Extensions' }
+WAHtmlCanvas >> mdlAlert: aBlock [
+	^ self mdlAlert
+		with: aBlock;
+		yourself
+]